<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <!-- 
			需求: 定义一个v-big指令, 和v-text功能类似, 但会把绑定的数值放大10倍.
		-->

    <div id="root">
      <h2>当前的n值是: <span v-text="n"></span></h2>
      <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
      <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        directives: {
          // big函数何时会被调用?
          // 1. 指令与元素成功绑定时(一上来).
          // 2. 指令所用到的数据发生更新时(错误理解)
          // 2. 指令所在的 "模板" 被重新解析时.
          big: function (element, binding) {
            console.log("big", this); // 注意此处的this是window
            console.log(element, binding);
            element.innerText = binding.value * 10;
          },
        },
      });
    </script>
  </body>
</html>
